#{extends 'main.html' /}
#{set title:post.title /}

<div class="post" id="${post.id}">
    <h3 class="title">
    	${post.title}
    </h3>
    <p class="subtitle">
    	<small>
    		Written by <span class="author">${post.author.username}</span> in <span class="title">${post.category.title}</span> at <span class="date">${post.dateUpdated.format("yyyy-MM-dd")}.
    	</small>
    </p>
    <p class="content">
    	${post.content}
    </p>
</div>

<table class="addcomment">
	<tr>
		<th>Title:</th>
		<td><input type="text" name="comment-title" id="comment-title" /></td>
	</tr>
	<tr>
		<th>Message:</th>
		<td><textarea name="comment-content" id="comment-content"></textarea></td>
	</tr>
	<tr>
		<td colspan="2" align="right"><input type="submit" id="saveComment" value="Add comment" /></td>
	</tr>
</table>

<script>
	$("#saveComment").click(function(){
		var id = $(".post").attr("id");
		var newTitle = $("#comment-title").val();
		var newContent = $("#comment-content").val();
		if(newTitle=="" || newContent=="")
			alert("Please fill in the title and the message");
		else
			$.post('@{Application.saveComment()}',{postId:id,title:newTitle,content:newContent},
				function(data){
					window.location.reload();
				}
			);
		return false;
	});
</script>

<div class="noposts">
#{ifnot post.comments}
	<p>No comments to display</p>
#{/ifnot}
</div>

<div class="comments">
	#{list items:post.comments, as:'comment' }
	<div class="comment">
	    <h3 class="title">
	    	${comment.title}
	    </h3>
	    <p class="content">
	    	${comment.content}
	    </p>
	</div>
	#{/list}
</div>